<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="al">
    <p>姓名：<input type="text"></p>
    <p>年龄：<input type="text"></p>
    <p>电话：<input type="text"></p>
    <p>住址：<input type="text" id="txt"></p>
    <button id="an">确认</button>
</body>
</html>
<script>
    var al = document.getElementById("al");
    console.log("body的子元素节点一共有："+al.childNodes.length)
    for(var i=0;i<al.childNodes.length;i++){
        console.log("第"+i+"个节点名称是"+al.childNodes[i].nodeName);
    }
    var p = document.createElement("p");
    var input = document.createElement("input");
    var ptext = document.createTextNode("性别：");
    al.insertBefore(p, al.children[1]);
    p.setAttribute("id","p1")
    var p1 = document.getElementById("p1");
    p.appendChild(ptext);
    p1.appendChild(input)

    var btn = document.getElementById("an");
    btn.onclick = function(){
                var myInput = document.getElementsByTagName("input");
                alert("姓名："+myInput[0].value+"的性别是："+myInput[1].value
                +"，今年"+myInput[2].value+"岁了，电话号码是："+myInput[3].value
                +"，地址是"+myInput[4].value)
            }
    var txt = document.getElementById("txt");
    txt.style.width = "200px";
    txt.style.height = "100px";
    txt.style.border = "2px solid red";
</script>